<!--
 * @Description: 
 * @Version: 2.0
 * @Autor: 张磊
 * @Date: 2020-11-10 10:52:29
 * @LastEditors: 张磊
 * @LastEditTime: 2020-11-13 00:03:32
 * @FilePath: \lht1802A\项目代码\rank_tree\src\components\Item.vue
-->
<template>
    <dl @click="goDetail(item.id)">
        <dt><img :src="item.image" alt=""></dt>
        <dd>{{item.name}}</dd>
    </dl>
</template>
<script>
import { useRoute, useRouter } from "vue-router";
export default {
    props:['item'],
    methods: {
        goDetail(id){
            this.$router.push(`/detail/${id}`)
        }
    },
}
</script>
<style lang="scss" scoped>
dl {
  display: flex;
  flex-direction: column;
  text-align: center;
  dt {
    width: 100%;
    img {
      width: 70%;
      height: 70%;
    }
  }
  dd {
    margin-top: 0.1rem;
  }
}
</style>